<!--
 * @Description: 表格组件
 * @Author: chendingfengmail@163.com
 * @Date: 2021-11-01 11:35:37
 * @LastEditTime: 2022-01-17 14:14:18
 * @LastEditors: chendingfengmail@163.com
 * @Reference:
-->
<template>
  <div class="dd-table" ref="tableContent">
    <div class="dd-table-operation" :style="{ 'display': !option.operation ? 'none' : '' }">
      <el-form :inline="true" :model="screen">
        <el-row>
          <el-col :span="19" :xs="15" :sm="16" :lg="16" :xl="18">
            <div :class="expand == true ? 'condition-all' : 'condition-part'">
              <slot name="condition"></slot>
            </div>
          </el-col>
          <el-col :span="5" :xs="9" :sm="8" :lg="8" :xl="6">
            <div class="operation-btn">
              <el-form-item v-if="selectionData.length>0 && routePath != '' && showButton(routePath, '删除')" >
                <el-button type="del" size="small" @click="selectionDelete" >删除{{ `(${selectionData.length})` }}</el-button>
              </el-form-item>
              <slot name="operation"></slot>
              <el-form-item v-if="option.operation">
                <el-button v-if="!expand" type="text" @click="expand = true">展开</el-button>
                <el-button v-if="expand" type="text" @click="expand = false">收起</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
  </div>
  <div class="dd-table-content" v-loading="option.loading" :style="{ 'padding-top': !option.operation ? '10px' : '20px' }">
    <el-table tooltip-effect="light" style="width:100%" :header-cell-style="{ background: '#f8f8f8', color: '#000' }"
      ref="ddTable" :data="data" size="mini" :row-key="rowKey" header-row-class-name="table-head"
        :tree-props="treeProps" default-expand-all highlight-current-row :height="tableHeight" :tripe="false"
        :border="option.tableBorder == undefined ? defaultOption.tableBorder : option.tableBorder" :empty-text="option.notDataText" @select="select"
        @select-all="selectAll" @selection-change="selectionChange" @row-click="rowClick">
        <!-- <el-table-column label="序号" min-width="80" v-if="showNumber">
            <template slot-scope="scope">
              <span>{{screen.pageIndex - 1 + scope.$index + 1}}</span>
            </template>
          </el-table-column> -->
        <el-table-column v-if="option.selection == undefined ? defaultOption.selection : option.selection" align="center" type="selection" width="55">
        </el-table-column>
        <slot></slot>
      </el-table>
    </div>
    <div class="dd-table-page" v-if="!option.pageNumber">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="screen.pageIndex"
        :page-size="screen.pageSize" :page-sizes="[10, 15, 50, 100, 500, 1000]" :total="option.total"
        @current-change="currentChange" @size-change="sizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'dd-table',
  props: {
    data: { //表格数据
      type: Array,
      default: () => []
    },
    rowKey: String,
    height: {
      type: String,
      default: '300px'
    },
    screen: { //表格筛选信息
      type: Object,
      default: () => { }
    },
    option: { //表格配置信息
      type: Object,
      default: () => {
        return this.defaultOption
      }
    },
    treeProps: {
      type: Object,
      default: () => { }
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    loadingData: Function, //加载数据方法
    showNumber: { //是否显示序列号
      type: Boolean,
      default: false
    },
    routePath: { //是否显示序列号
      type: String,
      default: ''
    },
  },
  data() {
    return {
      defaultOption: {
        total: 0, //表格总数据
        loading: true, //加载表格信息
        notDataText: '暂无数据',
        pageNumber: true,
        operation: true,
        dialogTable: true,
        tableBorder: true,    // 是否显示表格边框（关联列宽度拖动功能）
        selection: false,     // 是否开启多选（该参数集成多选删除）
      },
      selectionData: [],
      tableHeight: 400,
      expand: false, // 是否展开搜索条件
      
    }
  },
  computed: {
    ...mapGetters('ddAdmin/menu', ['showButton'])
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight()
    });
  },
  activated() {
    this.$nextTick(() => {
      this.doLayout()
    })
  },
  methods: {
    getHeight(e) {
      if (this.option.dialogTable) {
        this.tableHeight = this.height
      } else {
        this.tableHeight = window.innerHeight - this.$refs.tableContent.offsetTop - 263
        window.onresize = () => {
          this.tableHeight = window.innerHeight - this.$refs.tableContent.offsetTop - 263
        }
      }
      e => e.preventDefault()
    },

    //加载表格信息
    loadingInfo: function () {
      this.option.loading = true;
      setTimeout(() => {
        this.loadingData();
      }, 200);
    },

    //查询表格信息
    checkInfo: function () {
      this.screen.pageIndex = 1;
      this.loadingInfo();
    },

    currentChange: function (current) {
      this.option.loading = true;
      this.screen.pageIndex = current;
      this.loadingInfo();
    },

    sizeChange: function (size) {
      this.option.loading = true;
      this.screen.pageIndex = 1;
      this.screen.pageSize = size;
      this.loadingInfo();
    },

    //监听表格复选框
    select: function (selection, row) {
      this.$emit('select', selection, row);
    },

    //监听表格全选复选框
    selectAll: function (selection) {
      this.$emit('selectAll', selection);
    },

    //监听表格复选框选项
    selectionChange: function (selection) {
      this.selectionData = selection;
      this.$emit('selectionChange', selection);
    },

    // 删除表格复选框选项
    selectionDelete: function (){
      this.$confirm(`确认删除${this.selectionData.length}项内容, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('selectionDelete', this.selectionData);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

    //获取复选框id数组
    getSelectId: function () {
      var idArr = [];
      for (let item of this.selectionData) {
        idArr.push(item[this.rowKey]);
      }
      return idArr;
    },

    //获取复选框row数组
    getSelectRow: function () {
      return this.selectionData;
    },

    //清除复选框选中
    clearSelect: function () {
      this.$refs['ddTable'].clearSelection();
    },

    //清除选中且加载
    loadingClear: function () {
      this.$refs['ddTable'].clearSelection();
      this.loadingInfo();
    },

    //设置选择行
    setSelectRow: function (row, selected) {
      this.$refs['ddTable'].toggleRowSelection(row, selected);
    },

    //查询渲染表格
    doLayout: function () {
      this.$refs['ddTable'].doLayout();
    },

    //监听表格某行
    rowClick(row) {
      this.$emit('rowClick', row);
    }
  },

}
</script>

<style lang='scss' scoped>
.dd-table {
  display: flex;
  flex-direction: column;
  position: relative;
  /* height: 93%; */
}

.dd-table-operation {
  width: 100%;
}

.condition-all {
  display: inline;
}

.condition-part {
  display: inline-block;
  overflow: hidden;
  max-height: 36px;
}

.dd-table-operation .operation-btn {
  float: right;
}

.dd-table-content {
  flex: 1;
}

::v-deep .el-table__header th {
  background-color: #fff !important;
  color: #5e6679 !important;
}

::v-deep .table-head {
  background-color: #fff;
}

.dd-table-page {
  width: 99.9%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  // border: 1px solid #eee;
  // border-top: none;
  .el-pagination {
    padding-right: 20px;
  }
}</style>
